<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f2f5;
      margin: 0;
      padding: 0;
      color: #333;
    }
    .container {
      max-width: 900px;
      margin: 20px auto;
      padding: 20px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row;
      gap: 20px;
    }
    .form-section, .search-section {
      flex: 1;
    }
    h1, h2 {
      color: #2c3e50;
      margin-bottom: 20px;
    }
    .form-section form {
      margin-bottom: 20px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #fafafa;
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 14px;
      color: #333;
    }
    .form-group input[type="text"], .form-group input[type="date"], .form-group select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      box-sizing: border-box;
    }
    .form-group .search {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }
    .form-group .search input {
      flex: 1;
      margin-left: 10px;
    }
    input[type="button"] {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
    }
    input[type="button"]:hover {
      background-color: #0056b3;
    }
    .search-section {
      display: flex;
      flex-direction: column;
    }
    .search-section .form-group {
      margin-bottom: 15px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
      font-size: 14px;
    }
    th {
      background-color: #007bff;
      color: white;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    tr:hover {
      background-color: #e2e6ea;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="form-section">
      <h1>Submit Your Business Data</h1>
      <form id="dataForm">
        <div class="form-group">
          <label for="name">Name:</label>
          <select id="name" name="name" required>
            <option value="">Select...</option>
            <option value="Alice Johnson">Alice Johnson</option>
            <option value="Bob Smith">Bob Smith</option>
            <option value="Charlie Brown">Charlie Brown</option>
            <option value="Diana Prince">Diana Prince</option>
          </select>
        </div>

        <div class="form-group">
          <label for="date">Date:</label>
          <input type="date" id="date" name="date" required>
        </div>

        <div class="form-group">
          <label for="hours">Duration (hours):</label>
          <select id="hours" name="hours" required>
            <option value="">Select...</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
          </select>
        </div>

        <div class="form-group">
          <label for="minutes">Duration (minutes):</label>
          <select id="minutes" name="minutes" required>
            <option value="">Select...</option>
            <option value="0">0</option>
            <option value="15">15</option>
            <option value="30">30</option>
            <option value="45">45</option>
            <option value="60">60</option>
            <option value="75">75</option>
            <option value="90">90</option>
            <option value="105">105</option>
            <option value="120">120</option>
          </select>
        </div>

        <div class="form-group">
          <label for="reason">Reason:</label>
          <select id="reason" name="reason" required>
            <option value="">Select...</option>
            <option value="Vacation">Vacation</option>
            <option value="Sick Leave">Sick Leave</option>
            <option value="Personal">Personal</option>
          </select>
        </div>

        <input type="button" value="Submit" onclick="submitData()">
      </form>
    </div>

    <div class="search-section">
      <div class="form-group search">
        <label for="search-name">Search by Name:</label>
        <input type="text" id="search-name" onkeyup="filterTable()" placeholder="Search for names...">
      </div>

      <div class="form-group search">
        <label for="search-date">Search by Date:</label>
        <input type="date" id="search-date" onchange="filterTable()">
      </div>

      <h2>Submitted Data</h2>
      <div id="data-table"></div>
    </div>
  </div>

  <script>
    function submitData() {
      const name = document.getElementById('name').value;
      const date = document.getElementById('date').value;
      const hours = document.getElementById('hours').value;
      const minutes = document.getElementById('minutes').value;
      const reason = document.getElementById('reason').value;

      // Combine hours and minutes into a single duration string
      const duration = `${hours}h ${minutes}m`;

      google.script.run.saveData(name, date, duration, reason);
      document.getElementById('dataForm').reset();
      fetchData();
    }

    function displayData(data) {
      const table = document.createElement('table');
      const thead = document.createElement('thead');
      const tbody = document.createElement('tbody');

      const headers = ['Name', 'Date', 'Duration', 'Reason'];
      const headerRow = document.createElement('tr');
      headers.forEach(header => {
        const th = document.createElement('th');
        th.textContent = header;
        headerRow.appendChild(th);
      });
      thead.appendChild(headerRow);

      data.forEach(row => {
        const tr = document.createElement('tr');
        row.forEach(cell => {
          const td = document.createElement('td');
          td.textContent = cell;
          tr.appendChild(td);
        });
        tbody.appendChild(tr);
      });

      table.appendChild(thead);
      table.appendChild(tbody);
      document.getElementById('data-table').innerHTML = ''; // Clear previous data
      document.getElementById('data-table').appendChild(table);
    }

    function fetchData() {
      google.script.run.withSuccessHandler(displayData).getData();
    }

    function filterTable() {
      const nameSearchValue = document.getElementById('search-name').value.toLowerCase();
      const dateSearchValue = document.getElementById('search-date').value;
      const rows = document.querySelectorAll('#data-table table tbody tr');
      
      rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        const nameCell = cells[0];
        const dateCell = cells[1];
        const nameMatch = nameCell.textContent.toLowerCase().includes(nameSearchValue);
        const dateMatch = dateSearchValue === '' || dateCell.textContent === dateSearchValue;
        const shouldShow = nameMatch && dateMatch;
        row.style.display = shouldShow ? '' : 'none';
      });
    }

    // Initial fetch to display data on page load
    fetchData();
  </script>
</body>
</html>
